import React from 'react'
import { Link } from 'react-router-dom'
import { Button, NavBar, Icon, InputItem, WhiteSpace, WingBlank } from 'antd-mobile'



export default function login(props) {
    function handleCity() {
        props.history.push('/city')
    }
    return (
        <div className="login-wrap">
            {/* <Button type="warning">warning</Button> */}
            <NavBar
                mode="light"
                icon={<Icon type="left" color="black" />}
                onLeftClick={() => console.log('onLeftClick')}
            >硅谷注册登录</NavBar>
            <WhiteSpace size="sm" />
            <WingBlank size="lg">
                <InputItem
                    clear
                    placeholder="请输入手机号"
                >
                    <div className="login-icon" onClick={handleCity}>+{localStorage.getItem('areaCode')}<Icon type="down" /></div>
                </InputItem>
                <div className="login-getcode">
                    <InputItem
                        clear
                        placeholder="请输入手机验证码"
                    ></InputItem>
                    <div className="login-get">获取验证码</div>
                </div>
                <WhiteSpace size="xl" />
                <WingBlank size="lg">
                    <Button type="warning" className="login-btn">登录</Button>
                    <div className="login-link">
                        <Link to="/login" className="link">账号密码登录</Link>
                        <Link to="/register" className="link">验证码登录</Link>
                    </div>
                    <div className="login-line">
                        <div className="line"></div>
                        <div>其他登录方式</div>
                        <div className="line"></div>
                    </div>
                    <WhiteSpace size="xl" />
                    <WingBlank>
                        <div className="login-icon">
                            <span className="iconfont icon-github"></span>
                            <span className="iconfont icon-wechat"></span>
                            <span className="iconfont icon-qq"></span>
                        </div>
                    </WingBlank>
                    <div className="footer">
                        未注册的手机号验证后将自动创建硅谷账号，登录即代表您已同意
                        <a href="#">硅谷隐私政策</a>
                    </div>
                </WingBlank>
            </WingBlank>
        </div>
    )
}
